<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='上级类型' name='parentId' :rules="[{required : true, message : '请选择上级类型'}]">
                <a-tree-select show-search v-model:value='formData.parentId' :tree-data='parentOptions' :field-names='{children : "children", label : "name", value : "id"}'></a-tree-select>
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' :maxlength="30" show-count />
        </a-form-item>
        <a-form-item label='编码' name='code' :rules="[{required : true, message : '请填写编码'}]">
            <a-input type='text' v-model:value='formData.code' :maxlength="20" show-count />
        </a-form-item>
        <a-form-item label='图标' name='icon'>
            <a-upload list-type='picture-card' :max-count="1" v-model:file-list='coverList' :beforeUpload='beforeUpload' :customRequest='uploadCover' accept="image/png,image/jpeg,image/gif,image/webp">
                <template v-if='coverList.length == 0'>
                    <PlusOutlined />
                </template>
            </a-upload>
        </a-form-item>
        <a-form-item label='阿里云产品' name='aliProduct' :rules="[{required : true, message : '请填写阿里云产品'}]">
            <a-input type='text' v-model:value='formData.aliProduct' :maxlength="15" show-count />
        </a-form-item>
        <a-form-item label='运行参数配置' name='paramFields'>
            <a-select v-model:value="formData.paramFields" :options="paramsFieldOptions"  mode="multiple" style="width: 100%" :field-names="{ label: 'name', value: 'id'}" />
        </a-form-item>
        <a-form-item label='排序' name='sort'>
            <a-input-number type='number' v-model:value.number='formData.sort' />
        </a-form-item>
        <a-form-item label='启用' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='启用' un-checked-children='禁用'/>
        </a-form-item>
    </a-form>
</template>



<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
    import { saveApi, deviceTypeOptionsApi } from '@/api/devices/DeviceType';
    import { optionsApi } from '@/api/devices/DeviceParamsField';
import { generateCodeFromUid, recursionFn } from '@/utils';
    import { ref } from 'vue';
import { uploadIconApi } from '@/api/Upload';
import { Modal } from 'ant-design-vue';
    

    const props = defineProps<{
        row? : any;
        parentId:number;
    }>()

    const coverList = ref<any[]>([])

    const formRef = ref()
    
    const parentOptions = ref<any[]>([{id : 0, name : '顶级类型', children : []}])
    const paramsFieldOptions = ref<any[]>([])

    
    const formData = ref({
        id : 0,
        name : '',
        icon : '',
        code : '',
        aliProduct : '',
        enable : true,
        sort : 1,
        parentId : 0,
        portCount : '',
        paramFields : []
    })
    

    if(props.row) {
        for(let k in props.row) {
            if(k in formData.value) {
                formData.value[k] = props.row[k]
            }
        }

        if(props.row.icon) {
            coverList.value[0] = {
                status : 'done',
                url : import.meta.env.B_NET_STATIC_URL + props.row.icon
            }
        }
    }else {
        formData.value.code = generateCodeFromUid()
        formData.value.parentId = props.parentId
    }


    function uploadCover(e) {
        if(e.file.size > 1024 * 1024) {
            Modal.error({
                title : '图片不能大于1M'
            })
            return
        }



        uploadIconApi(e.file).then(res => {
            coverList.value[0].status = 'done'
            coverList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            formData.value.icon = res.data
        })
    }

    function beforeUpload(file:File, field:FormField) {
        return true
    }


    async function submit() {
        let params  = await formRef.value.validate()
        return saveApi(params)
    }

    defineExpose({
        submit
    })

    deviceTypeOptionsApi().then(res => {
        if(res.data) {
            parentOptions.value[0].children.push(...recursionFn(res.data, Math.min(...res.data.map(r => r.parentId)), 'id', 'parentId', 'children'))
        }
    })


    optionsApi().then(res => {
        if(res.data) {
            paramsFieldOptions.value = res.data
        }
    })
</script>